.lead { color: #5a5a5a }
.span4 h2 { font-family: 'Lato', sans-serif; font-weight: 300; }
.page-header h1 { font-family: 'Lato', sans-serif; font-weight: 300; }
.lead { font-family: 'Lato', sans-serif; font-weight: 400; }
p { font-family: 'Karla', sans-serif; }

.header-user{
    font-family: 华文行楷;
    font-size: 20px;
}


.nav { font-family: 'Karla', sans-serif; }
.nav-header, .nav-title { font-family: 'Lato', sans-serif; font-weight: 300; }

.dropdown-menu li > a.no-background,
.dropdown-menu li > a.no-background:hover,
.dropdown-menu li > a.no-background:focus,
.dropdown-menu .active > a.no-background,
.dropdown-menu .active > a.no-background:hover,
.dropdown-submenu:hover > a.no-background,
/*.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { padding: 0; background: none; }*/

.dropdown-menu a { white-space: normal; padding-left: 0; padding-right: 0; }
.dropdown-menu li > a.no-background img { display: block; margin-left: auto; margin-right: auto; }
.dropdown .dropdown-menu .nav-header { padding-left: 0; padding-bottom: 0; margin: 0; }

 /*Thumbnail */
.dropdown-menu .thumbnail {
    border: 0; padding: 0; margin: 15px 0;
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

/* 2 Menus */
.mega-menu-2 { min-width: 290px !important; }
.mega-menu-2 ul { list-style: none; margin: 0 10px 5px; float: left; width: 125px; }

/* 3 Menus */
.mega-menu-3 { min-width: 100px !important; }
.mega-menu-3 ul { list-style: none; margin: 0 10px 5px; float: left; width: 125px; }

/* 4 Menus */
.mega-menu-4 { min-width: 580px !important; }
.mega-menu-4 ul { list-style: none; margin: 0 10px 5px; float: left; width: 125px; }

/* 5 Menus */
.mega-menu-5 { min-width: 725px !important; }
.mega-menu-5 ul { list-style: none; margin: 0 10px 5px; float: left; width: 125px; }

/* Wide Menu */
.mega-menu-2 ul.mega-wide { width: 270px; }
.mega-menu-3 ul.mega-wide { width: 415px; }
.mega-menu-4 ul.mega-wide { width: 560px; }
.mega-menu-5 ul.mega-wide { width: 705px; }

/* Two Column Menu */
.mega-menu-2 ul.two-column,
.mega-menu-3 ul.two-column,
.mega-menu-4 ul.two-column,
.mega-menu-5 ul.two-column { width: 270px; }

.mega-menu-3 ul.three-column,
.mega-menu-4 ul.three-column,
.mega-menu-5 ul.three-column { width: 415px; }

.mega-menu-4 ul.four-column,
.mega-menu-5 ul.four-column { width: 560px; }

/* Default Transition */
.transition ul li a {
    -webkit-transition: 0.2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: 0.2s ease-in-out; /** Firefox **/
    -o-transition: 0.2s ease-in-out; /** Opera **/ }
.transition ul li a:hover {
    padding-left: 3px;
    -webkit-transition: 0.2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: 0.2s ease-in-out; /** Firefox **/
    -o-transition: 0.2s ease-in-out; /** Opera **/ }

/* Add Products */
.mega-menu-2 .add-products li.nav-title,
.mega-menu-3 .add-products li.nav-title,
.mega-menu-4 .add-products li.nav-title,
.mega-menu-5 .add-products li.nav-title { width: 100%; margin-left: 0; margin-right: 0; }

.mega-menu-2 .add-products li,
.mega-menu-3 .add-products li,
.mega-menu-4 .add-products li,
.mega-menu-5 .add-products li { display: inline-block; margin-left: 5.5px; margin-right: 5.1px; width: 125px; }

/* Well */
.dropdown-menu p.well { margin: 10px 0 5px; }

/* For Images */
.mega-menu-2 img,
.mega-menu-3 img,
.mega-menu-4 img,
.mega-menu-5 img { margin-bottom: 5px; max-width: none; }

.img-left { float: left; margin: 0 10px 5px 0; }
.img-right { float: right; margin: 0 0 5px 10px; }

/* With Padding */
.with-padding { padding: 0 0 15px; }

/* With Image */
.with-image img { width: 100%; height: auto; margin: 0 auto 5px; }

/* Nav Collapse */
.nav-collapse li.dropdown { float: left; }

/* 979px and below */
@media (min-width: 768px) and (max-width: 979px) {

    /* 2 Menus */
    .nav-collapse .mega-menu-2 { min-width: 290px !important; }
    .nav-collapse .mega-menu-2 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 3 Menus */
    .nav-collapse .mega-menu-3 { min-width: 435px !important; }
    .nav-collapse .mega-menu-3 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 4 Menus */
    .nav-collapse .mega-menu-4 { min-width: 580px !important; }
    .nav-collapse .mega-menu-4 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 151px; }

    /* 5 Menus */
    .nav-collapse .mega-menu-5 { min-width: 714px !important; }
    .nav-collapse .mega-menu-5 ul { list-style: none; margin: 0 15px 0 0; float: left; width: 125px; }

    .nav-collapse .mega-menu-2 ul.two-column,
    .nav-collapse .mega-menu-3 ul.two-column,
    .nav-collapse .mega-menu-4 ul.two-column,
    .nav-collapse .mega-menu-5 ul.two-column { width: 270px; }

    .nav-collapse .mega-menu-3 ul.three-column,
    .nav-collapse .mega-menu-4 ul.three-column,
    .nav-collapse .mega-menu-5 ul.three-column { width: 400px; }

    .nav-collapse .mega-menu-4 ul.four-column,
    .nav-collapse .mega-menu-5 ul.four-column { width: 546px; }

    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a,
    .nav-collapse .nav .dropdown-toggle { padding: 3px 0; }

    /* Wide Menu */
    .nav-collapse .mega-menu-2 ul.mega-wide,
    .nav-collapse .mega-menu-3 ul.mega-wide,
    .nav-collapse .mega-menu-4 ul.mega-wide,
    .nav-collapse .mega-menu-5 ul.mega-wide { width: 100%; margin: 0; }

    .transition ul li a {
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }
    .transition ul li a:hover {
        padding-left: 0;
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }

}

/* 767px and below */
@media (max-width: 767px) {

    /* 2 Menus */
    .nav-collapse .mega-menu-2 { min-width: 480px !important; }
    .nav-collapse .mega-menu-2 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 3 Menus */
    .nav-collapse .mega-menu-3 { min-width: 480px !important; }
    .nav-collapse .mega-menu-3 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 4 Menus */
    .nav-collapse .mega-menu-4 { min-width: 480px !important; }
    .nav-collapse .mega-menu-4 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 151px; }

    /* 5 Menus */
    .nav-collapse .mega-menu-5 { min-width: 480px !important; }
    .nav-collapse .mega-menu-5 ul { list-style: none; margin: 0 15px 5px 0; float: left; width: auto; }

    .nav-collapse .mega-menu-2 ul.two-column,
    .nav-collapse .mega-menu-3 ul.two-column,
    .nav-collapse .mega-menu-4 ul.two-column,
    .nav-collapse .mega-menu-5 ul.two-column { width: 270px; }

    .nav-collapse .mega-menu-3 ul.three-column,
    .nav-collapse .mega-menu-4 ul.three-column,
    .nav-collapse .mega-menu-5 ul.three-column { width: 400px; }

    .nav-collapse .mega-menu-4 ul.four-column,
    .nav-collapse .mega-menu-5 ul.four-column { width: 546px; }

    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a,
    .nav-collapse .nav .dropdown-toggle { padding: 3px 0; }

    /* Wide Menu */
    .nav-collapse .mega-menu-2 ul.mega-wide,
    .nav-collapse .mega-menu-3 ul.mega-wide,
    .nav-collapse .mega-menu-4 ul.mega-wide,
    .nav-collapse .mega-menu-5 ul.mega-wide { width: 100%; margin: 0; }

    .transition ul li a {
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }
    .transition ul li a:hover {
        padding-left: 0;
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }

}

/* 480px and below */
@media (max-width: 480px) {

    /* 2 Menus */
    .nav-collapse .mega-menu-2 { min-width: 290px !important; }
    .nav-collapse .mega-menu-2 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 3 Menus */
    .nav-collapse .mega-menu-3 { min-width: 435px !important; }
    .nav-collapse .mega-menu-3 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: 125px; }

    /* 4 Menus */
    .nav-collapse .mega-menu-4 { min-width: 320px !important; }
    .nav-collapse .mega-menu-4 ul { list-style: none; margin: 0 20px 5px 0; float: left; width: auto; }

    /* 5 Menus */
    .nav-collapse .mega-menu-5 { min-width: 320px !important; }
    .nav-collapse .mega-menu-5 ul { list-style: none; margin: 0 15px 5px 0; float: left; width: auto; }

    .nav-collapse .mega-menu-2 ul.two-column,
    .nav-collapse .mega-menu-3 ul.two-column,
    .nav-collapse .mega-menu-4 ul.two-column,
    .nav-collapse .mega-menu-5 ul.two-column { width: 270px; }

    .nav-collapse .mega-menu-3 ul.three-column,
    .nav-collapse .mega-menu-4 ul.three-column,
    .nav-collapse .mega-menu-5 ul.three-column { width: 400px; }

    .nav-collapse .mega-menu-4 ul.four-column,
    .nav-collapse .mega-menu-5 ul.four-column { width: 546px; }

    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a,
    .nav-collapse .nav .dropdown-toggle { padding: 3px 0; }

    /* Wide Menu */
    .nav-collapse .mega-menu-2 ul.mega-wide,
    .nav-collapse .mega-menu-3 ul.mega-wide,
    .nav-collapse .mega-menu-4 ul.mega-wide,
    .nav-collapse .mega-menu-5 ul.mega-wide { width: 100%; margin: 0; }

    .transition ul li a {
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }
    .transition ul li a:hover {
        padding-left: 0;
        -webkit-transition: none; /** Chrome & Safari **/
        -moz-transition: none; /** Firefox **/
        -o-transition: none; /** Opera **/ }

}


